<!--
 * @Author: Pure <305737824@qq.com>
 * @CreateTime: 2021-07-30 12:09:55
 * @LastEditors: Pure <305737824@qq.com>
 * @LastEditTime: 2021-12-06 18:15:44
 * @Description:首页
-->
<template>
  <el-container>
    <el-main class="container">
      <el-row class="header">
        <el-col :span="4" class="base-padding-right">
          <engineer-card />
        </el-col>
        <el-col :span="20" style="padding-left:12px">
          <statistics-card />
        </el-col>
      </el-row>
      <el-row class="main">
        <main-card />
      </el-row>
      <!-- <el-row :gutter="12" class="footer">
        <el-col :span="8">
          <merits-card />
        </el-col>
        <el-col :span="8">
          <meeting-card />
        </el-col>
        <el-col :span="8">
          <warning-card />
        </el-col>
      </el-row> -->
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'Sy',
  components: {
    EngineerCard: () => import('./panel/engineer.vue'),
    StatisticsCard: () => import('./panel/statistics.vue'),
    MainCard: () => import('./panel/main.vue'),
    // MeritsCard: () => import('./panel/merits.vue'),
    // MeetingCard: () => import('./panel/meeting.vue'),
    // WarningCard: () => import('./panel/warning.vue'),
  },
};
</script>

<style lang="scss" scoped>
.el-container ::v-deep .el-aside {
  background: white;
}

.el-row + .el-row {
  padding-top: 12px;
}

.container {
  display: flex;
  flex-direction: column;
  padding-bottom: 12px;
}
.header {
  height: 130px;
}
.main {
  height:100%;
  flex:1;
}

</style>
